<template>
    <div>
        <el-table ref="multipleTable" :data="cartList" tooltip-effect="dark" style="width: 100%;"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="图片" width="120">
                <template slot-scope="scope">
                    <el-image :src="scope.row.pic"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="goodName" label="品名">
            </el-table-column>
            <el-table-column prop="price" label="单价" show-overflow-tooltip>
                <template slot-scope="scope">
                    ¥{{ scope.row.price }}
                </template>
            </el-table-column>
            <el-table-column label="数量">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.goodCount" controls-position="right"
                        @change="handleCountUpdate(scope.row)"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="总价">
                <template slot-scope="scope">
                    ¥{{ scope.row.price * scope.row.goodCount }}
                </template>
            </el-table-column>
        </el-table>
        <el-statistic group-separator="," :precision="2" :value="totalPrice" title="价格总计"></el-statistic>
        <el-input v-model="address" placeholder="地址"></el-input>
        <el-button type="primary" plain @click="newOrder">结算</el-button>
    </div>
</template>
  
<script>
import { newOrderReq } from '@/api/order'
import GoodItem from './GoodItem.vue'
import NavBar from './NavBar.vue'
import { cartListReq, cartUpdateCountReq } from '@/api/cart'

export default {
    components: { GoodItem, NavBar },
    name: 'Home',
    data() {
        return {
            cartList: [],
            multipleSelection: [],
            totalPrice: 0,
            address: ''
        }
    },
    methods: {
        newOrder() {
            newOrderReq({ carts: this.multipleSelection, address: this.address }).then(() => {
                this.$message("下单成功");
            })
        },
        handleCountUpdate(row) {
            console.log("update")
            cartUpdateCountReq({ id: row.cartId, count: row.goodCount }).then((data => {
                this.$message("更新个数成功");
                this.cartList = data
            }))
        },
        handleSelectionChange(val) {
            console.log(val)
            this.multipleSelection = val;
            this.totalPrice = 0
            debugger
            for (let i in this.multipleSelection) {
                this.totalPrice += this.multipleSelection[i].price * this.multipleSelection[i].goodCount;
            }
        }
    },
    mounted() {
        cartListReq().then(data => {
            this.cartList = data
        })
    }
}
</script>
  
<style></style>
  